<template>
    <view class="news">
		<news-nav :currentTab="currentTab" @changeTab="changeTab"></news-nav>
		<view class="uni-tab-bar">
			<swiper class="swiper-box" @change="selectSwiper" :current="currentTab">
				<swiper-item>
					<scroll-view scroll-y class="list" @scrolltolower="loadMore">
						<c-moment v-for="(item,index) in followMomentList" :moment="item.moment" :key="index"></c-moment>
						<load-more :text="followLoad"/>
					</scroll-view>
				</swiper-item>
				<swiper-item>
					<scroll-view scroll-y class="list" @scrolltolower="loadTopicMore">
						<view class="topiclist">
							<!-- 搜索 -->
							<input type="text" class="uni-input search" placeholder-class="iconfont icon-search" placeholder="搜索内容" />
							<!-- 广告轮播组件 -->
							<view class="news-ad">
								<mad></mad>
							</view>
							<!-- 热门分类 -->
							<hot-topic></hot-topic>
							<!-- 最近分类 -->
							<view class="relate-topic">
								<view>最近更新</view>
								<view>
									<topic-tab v-for="(item,index) in topicList" :topic="item.topic" :key="index"></topic-tab>
									<load-more :text="topicLoad"/>
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
    </view>
</template>
<script>
	import newsNav from "../../components/news/news-nav.vue"
	import Mad from "../../components/common/mad.vue"
	import HotTopic from "../../components/news/hot-topic.vue"
	import TopicTab from "../../components/common/TopicTab.vue"
	import CMoment from "../../components/common/moment.vue"
	import loadMore from "../../components/loadmore.vue"
	
	import MomentList from "../../common/mock/momentdata.js"
	import TopicData from "../../common/mock/topicdata.js"
	
    export default {
        components: {
            // mediaItem
			newsNav,
			CMoment,
			loadMore,
			Mad,
			HotTopic,
			TopicTab
        },
        data(){
			return {
				currentTab: 1,
				followMomentList: MomentList.list,
				followLoad: '加载更多',
				topicList: TopicData.list,
				topicLoad: "加载更多"
			}
		},
        onLoad() {
        },
        methods: {
			changeTab(idx){
				this.currentTab = idx
			},
			selectSwiper(e){
				// console.log(this.currentTab)
				this.currentTab = e.detail.current
			},
			loadMore(){
				this.followLoad = "加载中..."
				setTimeout(() => {
					this.followMomentList.push({
							moment: {
								uhead: "../../static/test/head.png",
								uname: "攒拢爱的速递",
								uage: 20,
								ugender: 1, // 0 boy 1 girl -1 
								me: {
									isFollow: true,
									isShare: false,
									iscomment: false,
									isThumb: true
								},
								mtitle: "暗淡担担面，阿妈的模式",
								mtype: 0, // 0 正常  1 视频 2 分享 
								mfimage: "../../static/test/banner2.jpg", // 封面图
								video: {
									playnum: '22w',
									long: '2:47'
								},
								share: {
									mfimage: "../../static/test/banner2.jpg",
									mtitle: "阿呆苏东坡爱搜大叔大妈"
								},
								location: "深圳 - 龙岗",
								shareNum: 200,
								commentNum: 200,
								thumbNum: 200
							}
						})
					this.followLoad = "加载更多"
				},2000)		
			},
			loadTopicMore(){
				this.topicLoad = "加载中..."
				setTimeout(() => {
					this.topicList.push({
							topic:{
								tImage : "../../static/test/head.png",
								tName: "一梦三年",
								tInfo: "安静的绿卡就是的绿卡快乐圣诞节埃里克森安静的斯科拉技术大咖建设靠大家爱丽丝",
								tNews: 881,
								tToday: 588
							}
						})
					this.topicLoad = "加载更多"
				},2000)		
			}
        }
    }
</script>

<style scoped>
	.news {
		height: 100vh;
	}
    .search {
		color: #D0C9D1;
		border-radius: 10rpx;
		background-color: #F7F0F7;
		text-align: center;
		padding: 10rpx;
	}
	
	.topiclist {
		margin: 0 20rpx;
	}
	
	.news-ad{
		margin-top: 10rpx;
		margin-bottom: 20rpx;
	}

	.relate-topic {
		margin-top: 20rpx;
	}
	.relate-topic > view:first-child {
		font-size: 34rpx;
		font-weight: 700;
	}
	
</style>
